<template>
	<view class="page-bg content-20">
		<block v-if="items.length > 0">
			<view class="notic-list" >
				<view class="notice-list__item" v-for="item in items" :key='item.id'>
					<view class="notice-list__info">
						<view class="notice-list__title">{{item.title}}</view>
						<view class="notice-list__time desc">{{item.creationTime | formatTime}} <text class="theme">{{item.timeFormat}}</text></view>
					</view>
				</view>
			</view>
			<view class="no-info">{{text}}</view>
		</block>
		<view class="empty" v-else>
			<u-empty mode='data' text='暂无内容~'></u-empty>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				text: '暂无相关信息~'
			}
		},
		
		onLoad() {
			this.pageSize = common.pageSize
		    this.getItems()
		},
		
		methods: {
			getItems() {
				let {pageIndex, pageSize} = this.$data
				api.getNoticePages({pageIndex, pageSize},(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 let temp = res.items
					 if(this.pageIndex !== 1) {
					     temp = [...this.items, ...res.items]
					 }
					 temp.map(item => {
					 	let timeStamp = new Date(item.creationTime).getTime()
					 	item.timeFormat = this.$u.timeFrom(timeStamp, false);
					 })
					 this.items = temp
				}) 
			}
		},
		
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		}
	}
</script>

<style scoped lang="scss">
	.theme{
		padding-left: 20upx;
	}
	.notic-list{
			border-radius: 10upx;
			padding: 0 20upx;
			box-sizing: border-box;
			overflow: hidden;
			background-color: #fff;
			.notice-list__item{
				@include flex-base;
				background-color: #fff;
				border-bottom: 1px solid $border-color;
				padding: 20upx 0;
			}
			.notice-list__info{
				font-size: $font-size-30;
				color: $font-base-color;
				
			}
			.notice-list__time{
				margin-top: 10upx;
			}
		}
</style>
